/**
 * 
 * props 练习 封装一个组件
 * 名称: Button
 * 作用: 渲染一个按钮
 * 特点:
 *  type:      <Button type={'primary'}>按钮</Button>  蓝色背景
 *  danger:    <Button disabled={true}>按钮</Button>  红色背景
 *  disabled:  <Button disabled={true}>按钮</Button>  该按钮不可点
 *  loading:   <Button loading={true}>按钮</Button>  显示加载中 gif 图
 */
import React from "react";
import "./Button.css";

export default function Button(props) {
  let { children, type, danger, disabled, loading, style, onClick } = props;
  //获取对应的类名
  let clsName = type ? `btn-${type}` : "";
  //声明样式
  const style2 = danger ? { background: "#d9534f", color: "white", ...style } : {...style};

  return (
    <button onClick={onClick} disabled={disabled} className={`btn ${clsName}`} style={style2}>
      {loading && <img width="14" src="/images/loading.gif" alt="" />}
      {children}
    </button>
  );
}
